﻿@page
@using FDSimpleModelGenerator.Json
@model FDSimpleModelGenerator.Pages.ClassTemplateModel
@{
    ViewData["Title"] = "类模板";
}

@Html.AntiForgeryToken()
<div class="main">
    @*<div class="row">
            <label class="col-md-2"></label>
        </div>*@
    <table class="table table-dark table-hover">
        <caption>模板分类 <a href="javascript:add()">新增</a></caption>
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">名称</th>
                <th scope="col">模板名</th>
                <th scope="col">分类</th>
                <th scope="col">语言数据类型</th>
                <th scope="col">描述</th>
                <th scope="col">时间</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Templates)
            {
            <tr>
                <th scope="row">@item.Id</th>
                <td>@item.Name</td>
                <td>@item.FileName</td>
                <td>@item.CategoryName</td>
                <td>@item.DataTypeText</td>
                <td>@item.Description</td>
                <td>@item.CreateTime.ToString("yyyy-MM-dd HH:mm")</td>
                <td><a href="javascript:" class="edit" data-item="@item.ToJson()">编辑</a></td>
            </tr>
            }
        </tbody>
    </table>
</div>
@await Component.InvokeAsync("EditDialog")
@*@await Component.InvokeAsync("Login", new {isDialog = false})*@

@section Scripts
{
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/jquery.extend.js"></script>
    <script>
        var isUploadReq = false;
        // 请求前先设置好antitoken
        $.ajaxSetup({
            beforeSend: function (xhr) {
                xhr.setRequestHeader("RequestVerificationToken",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                if (!isUploadReq) {
                    xhr.setRequestHeader("Content-Type", "application/json");
                }
            }
        });

        $(".edit").on('click', e => {
            var item = JSON.parse($(e.target).attr("data-item") || '{}');
            var config = {
                title: '编辑类模板',
                width: 620,
                height: 470,
                method: 'POST',
                url: '/classtemplate?handler=edit',
                beforeSaveCallback: saveCallback => {
                    var d = dialog('input[name=fileFileName]')[0]; // file 控件名称为 file+Name
                    if (d.files.length > 0) {
                        upload(d.files[0], upFiles => {
                            var file = upFiles[0];
                            dialog("input[name=FileName]").val(file);
                            saveCallback();
                        });
                    }
                    else {
                        console.log("no change the template file");
                        saveCallback();
                    }
                },
                items: [
                    { name: 'Id', cname: 'Id', value: item.Id || '', type: 'hidden' },
                    { name: 'Name', cname: '名称', value: item.Name || '', type: 'text', tip: '请输入类型名称' },
                    { name: 'Description', cname: '描述', value:  item.Description || '', type: 'textarea', tip: '请输入类型描述信息' },
                    { name: 'Category', cname: '分类', value: item.Category || '', type: 'select', tip: '请选择模板类别', selData: @Html.Raw(Model.Categories.ToJson()) },
                    { name: 'DataType', cname: '语言数据类型', value: item.DataType || '', type: 'select', tip: '请选择语言数据类型', selData: @Html.Raw(Model.LanguageDataTypes.ToJson()) },
                    { name: 'FileName', cname: '模板文件', value:  item.FileName || '', type: 'file', tip: '请输入选择类模板文件' }
                ],
                succCallback: res => {
                    console.log('编辑成功');
                    window.location.reload(true);
                }
            };
            showEditDialog(config);
        });

        function add() {
            // data: {items:[{name:'Name',cname:'名称',value,type:'text',tip:'请输入xxx'}],title:'编辑类模板分类',width:520,height:350,method:'POST',url:'/data',succCallback:func}
            var config = {
                title: '新增类模板',
                width: 620,
                height: 470,
                method: 'POST',
                url: '/classtemplate?handler=add',
                items: [
                    { name: 'Name', cname: '名称', value: '', type: 'text', tip: '请输入类型名称' },
                    { name: 'Description', cname: '描述', value:  '', type: 'textarea', tip: '请输入类型描述信息' },
                    { name: 'Category', cname: '分类', value: '', type: 'select', tip: '请输入模板类别', selData: @Html.Raw(Model.Categories.ToJson()) },
                    { name: 'DataType', cname: '语言数据类型', value: '', type: 'select', tip: '请选择语言数据类型', selData: @Html.Raw(Model.LanguageDataTypes.ToJson()) },
                    { name: 'FileName', cname: '模板文件', value:  '', type: 'file', tip: '请输入选择类模板文件' }
                ],
                beforeSaveCallback: saveCallback => {
                    var d = dialog('input[name=fileFileName]')[0]; // file 控件名称为 file+Name
                    if (d.files.length > 0) {
                        upload(d.files[0], upFiles => {
                            var file = upFiles[0];
                            dialog("input[name=FileName]").val(file);
                            saveCallback();
                        });
                    } else {
                        alertMsg('请选择模板文件', true);
                    }
                },
                succCallback: res => {
                    console.log('新增成功');
                    window.location.reload(true);
                }
            };
            showEditDialog(config);
        }

        // 上传文件
        function upload(file, callback) {
            var url = "upload?handler=server";
            var data = new FormData();
            data.append("filename", file);
            isUploadReq = true;
            $.ajax({
                url: url,
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                cache: false,
                success: res => {
                    console.log(res);
                    if (res.code === 0 || res.code === "Success") {
                        callback(res.data);
                    }
                    alertMsg(res.message, true);
                }
            });
            isUploadReq = false;
        }
    </script>

}
